<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>课程列表</title>
    <link rel="stylesheet" th:href="@{/client/css/list.css}"/>
    <script th:src="@{/client/lib/jquery/jquery-3.7.1.min.js}"></script>
    <script th:inline="javascript">
        let ctx = /*[[@{/}]]*/"";
        if (ctx.endsWith("/")) {
            ctx = ctx.substring(0, ctx.length - 1);
        }
    </script>
    <script th:src="@{/client/js/list.js}"></script>
    <script>

            document.addEventListener('DOMContentLoaded', function() {
                var today = new Date();
                var dd = String(today.getDate()).padStart(2, '0');
                var mm = String(today.getMonth() + 1).padStart(2, '0');
                var yyyy = today.getFullYear();
                var minDate = yyyy + '-' + mm + '-' + dd;

                // 设置所有日期选择器的最小日期为今天
                document.querySelectorAll('.birthFrom').forEach(function (input) {
                    input.setAttribute('min', minDate);

                    // 监听birthFrom的变化，并更新birthTo的最小日期
                    //     input.addEventListener('change', function() {
                    //     var selectedDate = this.value;
                    //     var birthToInput = this.closest('li').find(".birthTo");
                    //     birthToInput.setAttribute('min', selectedDate);
                    // });
                });
                document.querySelectorAll('.birthTo').forEach(function(input) {
                    input.setAttribute('min', minDate);

            });
        });
    </script>
   
</head>
<body>
<div class="main">

    <ul>
        <li th:each="c:${kehuList}" th:style="'background-image: url(\'' + ${c.picture} + '\');' ">
            <div class="name">
                <h2 th:text="${c.roomname}"></h2>
                <h3 style="display: inline">仅剩</h3>
                <p th:text="${c.count}" style="display: inline"></p>
            </div>
            <div class="action">
                <label class="date">选择入住时间</label><input class="d birthFrom" type="date" value=""/><br>
                <label class="date">选择离店时间</label><input class="d birthTo" type="date" value=""/>
                <button class="book" type="button">预约</button>
            </div>
        </li>
    </ul>
</div>
</body>
</html>